<template>
    <div class="commonProblem">
      <div class="commonProblemContent">
        <div class="contentTitle">
          <div class="titleIcon">
            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fproblems%402x.png" lazy-load>
          </div>
          <div class="titleText">常见问题</div>
        </div>
        <div class="contentCard" v-for="(item, index) in problemData" :key="index">
          <div class="matter">
            <div class="matterIndex">{{(index+1)}}.</div>
            <div class="matterList">
              <div class="matterCell" v-for="(itemMatter, indexMatter) in item.question" :key="indexMatter">{{itemMatter}}</div>
            </div>
          </div>
          <div class="result">
            <div class="resultCell" v-for="(itemResult, indexResult) in item.answer" :key="indexResult">{{itemResult}}</div>
          </div>
          <div class="caption" v-if="item.imgs">
            <img :src="item.imgs" lazy-load  mode="widthFix">
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {obtainCommonProblem} from '@/config/api'
import {showMessager} from '@/config/wUtils'
export default {
  data () {
    return {
      // 常见问题数据
      problemData: [],
      // 当前页面
      currentPage: 1
    }
  },
  mounted () {
    let self = this
    // 初始化 常见问题 界面
    self.initCommonProblem()
    // console.log(wx.getStorageSync('batch_id'), '.............')
  },
  methods: {
    // 初始化 常见问题 界面
    async initCommonProblem () {
        let self = this;
        console.log('初始化 常见问题 界面')
        const problemInfo = await obtainCommonProblem(self.currentPage)
        if (problemInfo) {
          if (problemInfo.status === 200) {
            // 常见问题数据
            self.problemData = [...self.problemData,...problemInfo.data] 
            self.currentPage ++
            if(JSON.stringify(self.problemData) !== '[]' && self.problemData.length % 10 === 0){
              // 当前页面
              // self.currentPage ++
            }
          }
          console.log(self.problemData, self.problemData.length / 10, '初始化 常见问题 界面')
        }
        
    },
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 当前页面
    self.currentPage = 1
    self.problemData = []
    // 初始化 常见问题 界面
    self.initCommonProblem()
    wx.stopPullDownRefresh()
  },
  // 上拉加载
  onReachBottom () {
    let self = this;
    // console.log(self.currentPage, self.problemData.length / 10 === self.currentPage)
    if(self.problemData.length % 10 === 0){
      // 初始化 常见问题 界面
      self.initCommonProblem()
    }else{
      showMessager('没有更多~')
    }
  },
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.commonProblem {
  width: 100%;
  // height: 100%;
  background: #ffffff;
  .commonProblemContent{
    width: 686rpx;
    margin: 31rpx auto;
    .contentTitle{
      width: 100%;
      text-align: center;
      div{
        display: inline-block;
        vertical-align: middle;
        height: 48rpx;
        line-height: 48rpx;
      }
      .titleIcon{
        width: 36rpx;
        height: 39rpx;
        line-height: 39rpx;
        margin-right: 8rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .titleText{
        font-family: PingFangSC-Regular;
        font-size: 34rpx;
        color: #333333;
        letter-spacing: 0.69rpx;
        text-align: center;
      }
    }
    .contentCard{
      background: #FFFFFF;
      box-shadow: 0 0 10rpx 2rpx rgba(198,198,198,0.30);
      border-radius: 10rpx;
      width: 100%;
      margin-top: 36rpx;
      box-sizing: border-box;
      padding: 20rpx 19rpx 30rpx 20rpx;
      .matter{
        font-family: PingFangSC-Medium;
        font-size: 26rpx;
        color: #333333;
        letter-spacing: 0.57rpx;
        line-height: 42rpx;
        // position: relative;
        display: flex;
        .matterIndex{
          display: inline-block;
          vertical-align: top;
          
          // position: absolute;
          // width:50rpx;
          // text-align:center;
        }
        .matterList{
          display: inline-block;
          vertical-align: top;
          flex: 1;

          // text-indent:50rpx;
        }
      }
      .result{
        font-family: PingFangSC-Regular;
        font-size: 26rpx;
        color: #666666;
        letter-spacing: 0.57rpx;
        line-height: 42rpx;
        margin-left: 20rpx;
        .resultCell{
          // text-indent:24rpx;
        }
      }
      .caption{
        width: 350rpx;
        margin-top: 12rpx;
        // margin-left: 50rpx;
        margin-left: 20rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
